import React from 'react';
import { Layout, Menu, Modal, message, Button, Dropdown } from 'antd';
import { HomeOutlined, ProjectOutlined, ApiOutlined, MoreOutlined } from '@ant-design/icons';
import { useNavigate, useLocation, Outlet } from 'react-router-dom';
import ProjectSelector from '../components/ProjectSelector';
import axios from '../utils/axios';

const { Header, Sider, Content } = Layout;

interface HomeProps {
  title: string;
}

const Home: React.FC<HomeProps> = ({ title }) => {
  const navigate = useNavigate();
  const location = useLocation();

  const handleMenuClick = (key: string) => {
    navigate(key);
  };

  const getSelectedKey = () => {
    const path = location.pathname.split('/')[1];
    return path || 'home';
  };

  const handleLogout = async () => {
    Modal.confirm({
      title: '确认退出',
      content: '确定要退出登录吗？',
      onOk: async () => {
        try {
          await axios.post('/auth/signout');
          localStorage.removeItem('token');
          message.success('退出成功');
          navigate('/login');
        } catch (error) {
          message.error('退出失败，请重试');
        }
      }
    });
  };

  const menu = (
    <Menu>
      <Menu.Item key="logout" onClick={handleLogout}>
        退出登录
      </Menu.Item>
    </Menu>
  );

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider>
        <div style={{ height: '32px', margin: '16px', color: 'white', fontSize: '18px', textAlign: 'center' }}>
          {title}
        </div>
        <Menu
          theme="dark"
          mode="inline"
          selectedKeys={[getSelectedKey()]}
          items={[
            {
              key: 'home',
              icon: <HomeOutlined />,
              label: '首页',
              onClick: () => handleMenuClick('home')
            },
            {
              key: 'projects',
              icon: <ProjectOutlined />,
              label: '项目管理',
              onClick: () => handleMenuClick('projects')
            },
            {
              key: 'api-debug',
              icon: <ApiOutlined />,
              label: '接口调试',
              onClick: () => handleMenuClick('api-debug')
            }
          ]}
        />
      </Sider>
      <Layout>
        <Header style={{ 
          padding: '0 16px', 
          background: '#fff', 
          display: 'flex', 
          justifyContent: 'space-between', 
          alignItems: 'center' 
        }}>
          <ProjectSelector />
          <Dropdown overlay={menu} placement="bottomRight" trigger={['click']}>
            <Button 
              type="text" 
              icon={
                <MoreOutlined 
                  style={{ 
                    transform: 'rotate(90deg)',  // 将图标旋转90度，使其横向显示
                    fontSize: '20px' 
                  }} 
                />
              }
            />
          </Dropdown>
        </Header>
        <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default Home; 